import React from 'react';
import { ScheduleOutlined, ClockCircleOutlined, UserOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { Contest } from '@/types/contest';
import dayjs from 'dayjs';
import styles from '../Detail.module.css';

interface ContestInfoProps {
  contest: Contest;
}

const ContestInfo: React.FC<ContestInfoProps> = ({ contest }) => {
  return (
    <div className={styles.infoSection}>
      <div className={styles.infoItem}>
        <ScheduleOutlined className={styles.infoIcon} />
        <span className={styles.infoLabel}>开始时间：</span>
        <span>{dayjs(contest.start_time).format('YYYY-MM-DD HH:mm')}</span>
      </div>
      <div className={styles.infoItem}>
        <ClockCircleOutlined className={styles.infoIcon} />
        <span className={styles.infoLabel}>结束时间：</span>
        <span>{dayjs(contest.end_time).format('YYYY-MM-DD HH:mm')}</span>
      </div>
      <div className={styles.infoItem}>
        <UserOutlined className={styles.infoIcon} />
        <span className={styles.infoLabel}>创建者：</span>
        <span>{contest.created_by?.username || '-'}</span>
      </div>
      <div className={styles.infoItem}>
        <InfoCircleOutlined className={styles.infoIcon} />
        <span className={styles.infoLabel}>比赛ID：</span>
        <span>{contest.id}</span>
      </div>
    </div>
  );
};

export default ContestInfo; 